<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
		<meta name="renderer" content="webkit">
		<!--国产浏览器高速模式-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="穷在闹市" />
		<!-- 作者 -->
		<meta name="revised" content="穷在闹市.v3, 2019/05/01" />
		<!-- 定义页面的最新版本 -->
		<meta name="description" content="网站简介" />
		<!-- 网站简介 -->
		<meta name="keywords" content="搜索关键字，以半角英文逗号隔开" />
		<title>穷在闹市出品</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
		<script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
		<script type="text/javascript" src="../../layui/layui.js"></script>
		<script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
		<!-- 公共样式 结束 -->
		
		<style>
			.layui-form-label{
				width: 100px;
			}
			.layui-input-block{
				margin-left: 130px;
			}
			.layui-form{
				margin-right: 30%;
			}
		</style>

	</head>

	<body>
		<div class="cBody">
			<form id="addForm" class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">商品名称</label>
					<div class="layui-input-block">
						<input type="text" name="goodsName" required lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品图片</label>
					<div class="layui-upload-drag" id="goodsPic">
                        <input type="hidden" id="goodsPic_file" value="">
					  <i class="layui-icon"></i>
					  <p>点击上传，或将文件拖拽到此处</p>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">数量</label>
					<div class="layui-input-block">
						<input type="text" name="company" required lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">参考价格</label>
					<div class="layui-input-block">
						<input type="text" name="price" required lay-verify="required|number" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">型号</label>
					<div class="layui-input-block">
						<input type="password" name="password" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">规格</label>
					<div class="layui-input-block">
						<input type="password" name="password2" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">描述</label>
					<div class="layui-input-block">
						<textarea name="desc" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">是否是批发商品</label>
					<div class="layui-input-block">
						<input type="radio" name="sfpfsp" value="nan" title="是">
						<input type="radio" name="sfpfsp" value="nv" title="否" checked>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分类</label>
	                <div class="layui-input-inline">
	                    <select name="provid" id="select_first" lay-filter="provid" onchange="selectFirstChangeEvent()" >

	                    </select>
	                </div>
	                <div class="layui-input-inline">
	                    <select name="cityid" id="select_second" lay-filter="cityid">

	                    </select>
	                </div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<input type="radio" name="status" value="1" title="启用">
						<input type="radio" name="status" value="0" title="禁用" checked>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="submitBut">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
			
			
			<script>
                var form_a ,layer
                layui.use(['upload','form','layer'], function() {
                    var form = layui.form;
                    var upload = layui.upload;
                    var laye = layui.layer;
                    layer = laye;
                    form_a =form;
                    //监听提交
                    form.render();
                    form.on('submit(submitBut)', function(data) {
                        var jsonData ={},
                            data = data.field,
                            imageUrl = "",
                            flag = false;
                        console.log(data)
                        jsonData.name = data.goodsName;
                        jsonData.price = data.price;
                        jsonData.title = data.desc;
                        console.log("provid"+data.provid)
                        console.log("cityid"+data.cityid)
                        if(data.provid === "" || data.provid === undefined || data.provid == '0'){
                            alert("请选择分类");
                            return false;
                        }else if(data.cityid === "" || data.cityid === undefined || data.cityid == '0' ){
                            if(data.provid != '0') {
                                jsonData.productId = data.provid;
                                console.log('pro');
                            }else {
                                alert("分类")
                                return false;
                            }

                        }else {
                            console.log('city')
                            jsonData.productId = data.cityid;
                        }
                        imageUrl = $("#goodsPic_file").val();
                        if( imageUrl === "" || imageUrl === undefined) {
                            layer.tips("#goodsPic","请选择图片",{tipsMore:true});
                            alert("请选择图片")
                            return false;
                        }else {
                            jsonData.image = imageUrl;
                        }
                        jsonData.num = data.company;
                        jsonData.status = data.status;
                        console.log(jsonData)
                        $.ajax({
                            url:"/product/addProduct",
                            type:"post",
                            data:jsonData,
                            success:function (res) {
                                if(res.code == "200") {
                                    flag = true;
                                    document.getElementById("addForm").reset();
                                    layui.layer.alert("success")
                                }else {
                                    layui.layer.alert("error")
                                }
                            }
                        })
                        return flag;
                    });
                    form.verify({
                        //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                        ZHCheck: [
                            /^[\u0391-\uFFE5]+$/
                            ,'只允许输入中文'
                        ]
                    });
                    //拖拽上传
                    upload.render({
                        elem: '#goodsPic',
                        url: '/upload/productImage',
                        done: function(res) {
                            console.log(res)
                            $("#goodsPic_file").val(res.msg)
                        }
                    });

                    //fisrt select 改变事件
                    form.on('select(provid)',function () {
                        var id = $("#select_first :selected").val();
                        console.log(id)
                        getChildCategory(id);
                    })
                    //second select 改变事件
                    form.on('select(cityid)',function () {

                    })


                });
                /**
                 * 一级分类获取
                 */
                function getParentCategory(){

                    $.ajax({
                        url:"/category/queryCategories",
                        type:"post",
                        data:{"isParent":1},
                        success:function (res) {
                            if(res.code == "200 ") {
                                renderFirstSelection(res.extend.list,res.extend.list.length)
                            }else {
                                console.log(res);
                            }
                        }
                    })
                }

                /**
                 * 二级分类获取
                 */
                function getChildCategory(id){
                    $.ajax({
                        url:"/category/queryCategories",
                        type:"post",
                        data:{"parentId":id,"isParent":0},
                        success:function (res) {
                            if(res.code == "200") {
                                renderSecondSelection(res.extend.list)
                            }else {
                                console.log(res);
                            }
                        }
                    })

                }
                function renderFirstSelection(data){
                    var fisrt = $('#select_first');
                    fisrt.html("")
                    fisrt.append("<option value=\"0\">一级分类</option>")
                    for(var i=0; i<data.length; i++) {
                        fisrt.append('<option value="'+(data[i].id)+'">'+data[i].name+'</option>')
                    }
                    form_a.render('select')
                }
                function renderSecondSelection(data){
                    var fisrt = $('#select_second');
                    fisrt.html("")
                    fisrt.append("<option value=\"0\">二级分类</option>")
                    for(var i=0; i<data.length; i++) {
                        fisrt.append('<option value="'+(data[i].id)+'">'+data[i].name+'</option>')
                    }
                    form_a.render('select')
                }
                $(document).ready(function () {
                    getParentCategory();
                })
			</script>

		</div>
	</body>

</html>